<template>
  <div style="padding: 49px 36px 0 36px" class="flex">
    <dataCard title="学员课程评价明细" height="919" width="1848">
      <div class="trainerBox" style="padding: 46px 0 0 11px">
        <el-form
          @submit.native.prevent
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
          label-width="68px"
        >
          <el-form-item label="课程名称" prop="courseId">
            <el-select v-model="queryParams.courseId" filterable clearable>
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in courses"
                :key="item.courseId"
                :label="item.courseName"
                :value="item.courseId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="门店名称" prop="schoolId">
            <el-select v-model="queryParams.schoolId" filterable clearable>
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in schools"
                :key="item.schoolId"
                :label="item.schoolName"
                :value="item.schoolId"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工姓名" prop="nickName">
            <el-input
              v-model="queryParams.nickName"
              placeholder="请输入员工姓名"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              v-preventReClick
              type="primary"
              plain
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button
              v-preventReClick
              icon="el-icon-refresh"
              size="mini"
              @click="resetQuery"
              >重置</el-button
            >
            <el-button
              v-preventReClick
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          style="margin: 10px 0 5px 0"
          height="705"
          border
          v-loading="loading"
          :data="postList"
          ref="tableRef"
        >
          <el-table-column
            show-overflow-tooltip
            label="课程名称"
            align="center"
            prop="courseName"
          />
          <el-table-column
            show-overflow-tooltip
            label="门店名称"
            align="center"
            prop="schoolName"
          />
          <el-table-column
            show-overflow-tooltip
            label="员工姓名"
            align="center"
            prop="nickName"
          />
          <el-table-column
            show-overflow-tooltip
            label="评价内容"
            align="center"
            prop="courseEvaluate"
          />
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
          :page-sizes="[10, 15, 20, 30, 40, 50, 100]"
        />
      </div>
    </dataCard>
  </div>
</template>
  
<script>
import {
  courseEvaluateList,
  courseList,
  schoolList,
} from "@/api/screen/courseLearningManagement";
import dataCard from "./components/dataCard";
export default {
  components: {
    dataCard,
  },
  data() {
    return {
      loading: false,
      postList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 15,
        courseId: undefined,
        nickName: undefined,
        schoolId: undefined,
      },
      total: 10,
      courses: [],
      schools: [],
    };
  },
  mounted() {
    this.getList();
    this.getCourseList();
    this.getSchoolList();
  },

  methods: {
    async getSchoolList() {
      let res;
      try {
        res = await schoolList({ pageNum: 1, pageSize: 9999 });
        if (res.code == 200) {
          this.schools = res.rows;
        }
      } finally {
      }
    },
    async getCourseList() {
      let res;
      try {
        res = await courseList({ pageNum: 1, pageSize: 9999, status: 0 });
        if (res.code == 200) {
          this.courses = res.rows;
        }
      } finally {
      }
    },
    async getList() {
      let res;
      try {
        this.loading = true;
        res = await courseEvaluateList(this.queryParams);
        if (res.code == 200) {
          this.postList = res.rows;
          this.total = res.total;
          // 页面数据更新后，让表格滚动条回到顶部
          this.$nextTick(() => {
            if (this.$refs.tableRef) {
              this.$refs.tableRef.bodyWrapper.scrollTop = 0;
            }
          });
        }
      } finally {
        this.loading = false;
      }
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "/screen/course/exportCourseEvaluateList",
        {
          ...this.queryParams,
        },
        `exportCourseEvaluateList_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
  
  <style>
</style>